<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>|DEMO4</title>
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <link rel="stylesheet" href="../css/baguetteBox.min.css">
    <link rel="stylesheet" href="../css/thumbnail-gallery.css">
    <style>
        .jq22-demo{ text-align: center; margin-top: 30px; }
        .jq22-demo a{ padding-left: 20px; padding-right: 20px; }
        .lightbox>img{
            width:100% !important;
            height:130px !important;
        }
        tr td:first-child{text-align:right}
        tr td:nth-child(2){text-align:left}
        .col-sm-6{width: 300px;}
    </style>
</head>
<body>
    <div class="htmleaf-container">
        <div class="container gallery-container">
            
            <input type="hidden" id="projectId" value=""/>
            
            
            <div class="tz-gallery" style="padding:20px;padding-left:5px;">
                <div class="row">
                   <!--  <div class="col-sm-6 col-md-4">
                        <div class="thumbnail" onclick="ddddd()">
                            <a class="lightbox" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg">
	                                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg" alt="Park">
                            </a>
                            <div class="caption">
                                <h3>湘潭锅炉16092601炉4 </h3>
                                 <table class="table_list">
                                    <tr>
                                        <td >设备序列号:</td>
                                        <td >300617100180</td>
                                    </tr>
                                    <tr>
                                        <td > 通讯设备:</td>
                                        <td >FBox</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <a class="lightbox" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg">
                                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg" alt="Bridge">
                            </a>
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <a class="lightbox" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg">
                                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg" alt="Tunnel">
                            </a>
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <a class="lightbox" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg">
                                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg" alt="Coast">
                            </a>
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <a class="lightbox" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg">
                                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg" alt="Rails">
                            </a>
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                            <a class="lightbox" href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg">
                                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg" alt="Traffic">
                            </a>
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            </div>
                        </div>
                    </div> -->
                </div>

            </div>

        </div>
        
    </div>
    
    <script type="text/javascript" src="../js/baguetteBox.min.js"></script>
    <script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<!--     <script type="text/javascript" src="../js/dialog.js"></script> -->
<script type="text/javascript" src="../js/cookieUtil.js"></script>
    <script type="text/javascript">
        baguetteBox.run('.tz-gallery');
        
        //   初始化
        $(function(){
            var did = readCookie("id_pro__r");
            console.log(did);
            $("#projectId").val(did);
            getDeviceInfo();
        })
        //查询当前项目下的所有的设备列表
        function getDeviceInfo(){
            //$(".row").html("");
            var pid = $("#projectId").val();
            if(pid){
                $.ajax({
                        url: '../device/qryDeviceList', 
                        type: 'POST',
                        async: false,
                        traditional:true,
                        data:{projectId:pid,yema:1,length:100},
                        dataType: 'json', 
                        timeout: 10000, 
                        error: function(){LQWarn('请求失败,请稍后重试');}, 
                        success: function(result){
                            if(result.resultCode==1000){
                                var items = result.returnObject.pageList;
                                console.log(items);
                                var item ;
                                var html="";
                                var commType= "";
                                if(items){
	                                $.each(items,function(i){
	                                    item = items[i];
	                                    if ( item.commType ==1){
	                                        commType = "REM301";
	                                    }else if(item.commType ==2){
	                                        commType = "蓝牙";
	                                    }else
	                                        commType = "其他";
	                                    html+='<div class="col-sm-6 col-md-4"><div class="thumbnail" onclick="showDeviceInfoD('+item.id+')">'+
	                                            '<a class="lightbox" href="javascript:void(0);">'+
	                                            '<img src="'+item.picUrl+'" alt="'+item.name+'"></a>'+
// 	                                            '<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521193360866&di=62177ea40a8978347316646c56f25cf5&imgtype=0&src=http%3A%2F%2Fimg1d.xgo-img.com.cn%2Fpics%2F1576%2F1575074.jpg" alt="'+item.name+'"></a>'+
	                                            '<div class="caption"><h3>'+item.name+'</h3>'+
	                                            '<table class="table_list" style="font-size: 15px;">'+
			                                    '<tr><td >通讯设备序列号:</td><td >'+item.serialNumber+'</td></tr>'+
			                                    '<tr><td > 通讯设备:</td><td >'+commType+'</td></tr>'+
	                                            '</table></div></div></div>';
	                                })
                                }
                                if(html){
	                                $(".row").html(html);
                                }else{
                                    html+='<img src="http://huanrun.yunzutai.com:22743/Uploads/Files/2018/2/26/0764045707da47958b2485b6371aca72.jpg" alt="暂无设备" width="70%" height="70%" /><br/>'+
                                    '<br/><span style="padding-left:20%">暂无设备&nbsp;&nbsp;<a class="close_icon" href="javascript:void(0);" onclick="goback()">去关联</a></span>';
	                                $(".row").html(html);
                                }
                            }
                            
                            else if(result.resultCode==1004){
//                                 LQWarn(result.returnObject);
                                window.top.location.href ="../login.jsp";
                            }else{
//                                 LQWarn(result.returnObject);
                            }
                        }
                    }); 
            }else{
//                 LQWarn('请求异常');
            }
        }
        //点击设备查询设备详情
        function showDeviceInfoD(id){
           parent.showDeviceInfoDd(id);
        }
        
        function goback(){
            //.projectId
            parent.edit_cancel();
            parent.showDeviceByItem($("#projectId").val());
        }
        
    </script>
</body>
</html>